import {
    Breadcrumb,
    Input, 
    Button, 
    Select, Pagination,   
} from 'antd'

import CommonFooter from '@/components/CommonFooter';
import KnowledgeBox from '@/components/KowledgeBox';
import styles from './index.less'
import { KnowledgeModelState, useDispatch, useSelector } from 'umi';
import  { useEffect, useRef, useState } from 'react';
import { IKnowledgeList } from '@/types';
import KnowledgeDrawer from '@/components/KnowledgeDrawer'
const { Option } = Select;
function Knowledge() {
    const dispatch = useDispatch();
    // 分页
    const [page, setPage] = useState(1);
    function pageChange(page: number, pageSize: number) {
        setPage(page);
    }

    // 发送请求
    useEffect(() => {
        dispatch({
            type: 'knowledge/getKnowledgeList',
            payload: { page }
        })
    }, [page])

    // 获取数据
    const { knowledgeList, knowledgeLength } = useSelector((state: { knowledge: KnowledgeModelState }) => state.knowledge);

    // 搜索功能
    const pageTitle = useRef(null)
    const pageStatus = useRef(null);
    const [status, setStatus] = useState('');
    function ChangeValue(value: string, option: any) {
        setStatus(value);
    }
    function pageSearch() {
        const payload = {
            options: {
                title: (pageTitle as any).current.input.value,
                status: status,
            },
            page // 还需要判断pageSize 改变的情况                
        }

        dispatch({
            type: 'knowledge/getKnowledgeList',
            payload
        })
    }
    const [visible, setVisible] = useState(false);
    const showDrawer = () => {
        setVisible(!visible);
        console.log('aaaa');
        console.log('visible...',visible);
        

    };

    function resetTo() {
        (pageTitle as any).current.input.value = '';
    }



    return <div className={styles.page}>

        <div className={styles.top}>
            <Breadcrumb>
                <Breadcrumb.Item>
                    <a href="/">工作台</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>知识小册</Breadcrumb.Item>
            </Breadcrumb>
        </div>
        <div className={styles.main}>
            <div className={styles.search}>
                <div className={styles.form}>
                    <div>
                        <div>
                            <div>
                                <label htmlFor="pageTile">名称:</label>
                            </div>
                            <div>
                                <Input type="text" placeholder='请输入页面名称' id='pageTile' ref={pageTitle} />
                            </div>
                        </div>
                        <div>
                            <div>
                                <label htmlFor="pageStatus">状态:</label>
                            </div>
                            <div>
                                <Select defaultValue="" style={{ width: '250px' }} ref={pageStatus} onChange={ChangeValue}>
                                    <Option value="publish">已发布</Option>
                                    <Option value="draft">草稿</Option>
                                </Select>
                            </div>
                        </div>
                    </div>

                    <div className={styles.btns}>
                        <Button type='primary' onClick={pageSearch}>
                            <span>搜索</span>
                        </Button>
                        <Button onClick={resetTo}>
                            <span>重置</span>
                        </Button>
                        
                    </div>
                </div>

            </div>
            <div className={styles.con}>
                <div className={styles.con_top}>
                    <Button type='primary' onClick={showDrawer}>
                        <span>+ 新建</span>
                    </Button>
                    {visible ? <KnowledgeDrawer flag={true} page={page}/>:<div></div>}
                </div>
                <div className={styles.list_box}>
                    <div className="listItem">
                        {
                            knowledgeList && knowledgeList.map((item: IKnowledgeList, index: number) => {
                                return <KnowledgeBox key={index} knowledgelist={item} page={page}></KnowledgeBox>
                            })
                        }
                    </div>

                    <div className={styles.pagination}>
                        <Pagination
                            total={knowledgeLength}
                            showSizeChanger
                            showTotal={total => `共 ${total} 条`}
                            onChange={pageChange}
                            defaultPageSize={12}
                            current={1}
                        />
                    </div>
                </div>
            </div>
            <div>
                <CommonFooter></CommonFooter>
            </div>
        </div>

    </div>
}
export default Knowledge